<template>
  <div>
    <div v-for="(item,index) in groupsArr" :key="index">
      <div class="box">
        <div class="dv1">
          <van-image round width="1rem" height="1rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
          <div>
            <p class="name">{{item.name}}:</p>
            <p class="info">拼团价格太刺激了</p>
          </div>
        </div>
        <div class="dv2">
          <div>
            <p class="cha">还差1人成团</p>
            <p class="sj">
              <!-- {{remaining(item.time)}} -->
              仅剩
              <van-count-down :time="remaining(item.time)" />
            </p>
          </div>
          <div class="btn" @click="goGrounp(item)">去拼团</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { tokenCook } from "../../utils/cookies";
export default {
  name: "pt",
  props: ["sid"],
  data() {
    return {
      // dataArr: [],
    };
  },
  methods: {
    ...mapActions("groups", ["getmass"]),
    ...mapActions("login", ["getName", "getinfo"]),
    remaining(time) {
      // 开团时的时间戳
      let nowdate = new Date(time).getTime();
      /// 结束时的时间戳
      let end = nowdate + 24 * 60 * 60 * 1000;
      // 现在的时间戳
      let nowtime = new Date().getTime();

      return end - nowtime;
    },
    // 去拼团
    async goGrounp(item) {
      console.log(item.gid);
      console.log(this.sid);
      let token = tokenCook.get();
      if (!token) {
        this.$router.push("/login");
      }
      this.$router.push({
        path: "/spell",
        query: { pid: item.gid, id: this.sid },
      });
    },
  },
  computed: {
    ...mapState("login", ["info"]),
    ...mapState("groups", ["groupsArr"]),
  },
  async mounted() {
    // let r = await this.getmass({ id: this.sid });
    // this.dataArr = r;
    // console.log(this.dataArr);
  },
}; // http://192.168.1.142:8080/#/detail?id=50&mode=0
</script>

<style scoped>
.box {
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: space-between;
}

.dv1 {
  display: flex;
  align-items: center;
}

.dv2 {
  display: flex;
  text-align: right;
}

.name {
  font-size: 12px;
  color: #ccc;
  padding-left: 5px;
}

.info {
  font-size: 12px;
  padding-left: 5px;
}

.cha {
  font-size: 13px;
  color: #ea4141;
}

.sj {
  display: flex;
  font-size: 15px;
  color: #ccc;
}

.van-count-down {
  font-size: 15px;
  color: #ccc;
}

.btn {
  display: inline-block;
  height: 0.6rem;
  line-height: 0.6rem;
  width: 1.3rem;
  background: #eb5952;
  color: #fff;
  text-align: center;
  font-size: 0.25rem;
  border-radius: 0.12rem;
  margin-left: 3px;
}
</style>